<template>
  <div>
    <el-card shadow="always">
      <el-row type="flex" :gutter="20" align="middle">
        <el-col :span="3">
          <el-cascader
            :options="optionsArea"
            :props="{
              value: 'areaCode',
              label: 'areaName',
              children: 'children',
              checkStrictly: true,
            }"
            ref="cascader"
            @change="CascaderArea"
            :show-all-levels="false"
            v-model="query.areaCode"
          ></el-cascader>
        </el-col>
        <el-col :span="3">
          <el-cascader
            clearable
            placeholder="请选择单位业态"
            v-model="bodyindustryStr"
            :options="bodyindustryList"
            @change="onCascaderChange"
            :collapse-tags="true"
            :props="{
              checkStrictly: true,
              multiple: true,
               children:'list',
              label:'bodyIndustryRemarks',
              value:'bodyIndustryRemarks'
            }"
          ></el-cascader>
        </el-col>
        <el-col :span="4">
          <el-input
            clearable
            maxlength="50"
            v-model="query.identify"
            placeholder="请输入统一社会信用代码"
          ></el-input>
        </el-col>
        <el-col :span="4">
          <el-input
            maxlength="50"
            clearable
            v-model="query.newLicenseNo"
            placeholder="请输入许可证编号"
          ></el-input>
        </el-col>
        <el-col :span="4">
          <el-input
            clearable
            maxlength="50"
            v-model="query.unitName"
            placeholder="请输入单位名称"
          ></el-input>
        </el-col>

       <!-- <el-col :span="4">
          <el-input
            clearable
            maxlength="50"
            v-model="query.unitName"
            placeholder="请输入单位名称"
          ></el-input>
        </el-col> -->
        
       <el-col :span="4">
<el-select
            v-model="query.legalUnitStatus"
        
            placeholder="请选择执照状态"
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in [
                 {
                  value: '',
                  label: '执照状态',
                },
                {
                  value: '01',
                  label: '在业',
                },

                {
                  value: '02',
                  label: '企业直接申请注销',
                },
                {
                  value: '03',
                  label: '吊销后未注销',
                },
                {
                  value: '04',
                  label: '迁出',
                },
                {
                  value: '12',
                  label: '吊销后注销',
                }, {
                  value: '13',
                  label: '个体户撤销',
                },
              ]"
              :key="item.value"
            ></el-option>
          </el-select>
       </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="query.page=1;getList()">查询</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="default" @click="getExport">导出</el-button>
        </el-col>
      </el-row>
      <rz-height></rz-height>

      <el-row>
        <el-col :span="24">
          <el-table border :data="tableData" style="width: 100%" stripe>

     <el-table-column label="执照状态" prop="districtName" width="120">
              <template slot-scope="scope">
                 <div v-if="scope.row.legalUnitStatusStr">
                   <el-tag type="success" v-if="scope.row.legalUnitStatusStr=='在业'">{{ scope.row.legalUnitStatusStr }}</el-tag>
                   <el-tag type="danger" v-else>{{ scope.row.legalUnitStatusStr }}</el-tag>
                 </div>
                 <el-tag type="success" v-else>在业</el-tag>


                  
              </template>
            </el-table-column>
            

            <el-table-column label="区域街道" prop="districtName" width="180">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.districtStreet }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="营业执照名称"
              prop="unitName"
              width="250"
            ></el-table-column>
            <el-table-column
              label="经营者名称"
              width="250"
              prop="operatorName"
            >
            
              <template slot-scope="scope">
                <div>
                  {{ scope.row.operatorName||'--' }}
                </div>
              </template>
            </el-table-column>

            <el-table-column label="单位业态" width="200" prop="bodyIndustry">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.bodyIndustry
                  }}{{
                    scope.row.bodyIndustryRemarks
                      ? "--" + scope.row.bodyIndustryRemarks
                      : ""
                  }}
                </div>
              </template>
            </el-table-column>

            <el-table-column
              width="200"
              label="统一社会信用代码"
              prop="identify"
            ></el-table-column>

            <el-table-column label="许可证编号" width="200">
              <template slot-scope="scope">
                <div>{{ scope.row.newLicenseNo || "--" }}</div></template
              ></el-table-column
            >
            <el-table-column
              label="地址"
              prop="address"
              width="300"
            ></el-table-column>

            <el-table-column
              label="操作"
              prop="indexScore"
              width="120"
            >
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="score(scope.row)"
                  >企业状况图</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <pagination
            :total="total"
            :page.sync="query.page"
            @pagination="getList"
            v-show="total"
          />
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import {
  groupArea,
  exportAbnormalStateUnit,
  abnormalStateUnit,
  findSysDicBusiness
} from "@/api/modules/enterprise";
export default {
  components: {},
  created() {
    if (this.$route.query.code) {
      this.query.areaCode = this.$route.query.code;
    } else {
      this.query.areaCode = "320500000000";
    }
    this.getList();
    this.findAreaListNoParentByParentCode();
    this.findSysDicBusiness()
  },
  mounted() {},
  data() {
    return {
      bodyindustryStr: "",
      query: {
        areaCode: "",
        bodyIndustry: [],
        bodyIndustryRemarks: [],
        identify: "",
        isPage: 0,
        newLicenseNo: "",
        page: 1,
        pageSize: 10,
        unitName: "",
        legalUnitStatus:''
      },
      optionsArea:[],
      tableData:[],
      total: 0,
      bodyindustryList: [],
    };
  },
  // 方法
  methods: {
          findSysDicBusiness(){
findSysDicBusiness().then((res) => {
        // this.optionsArea = [res.data];
        // console.log(res);
        this.bodyindustryList=res.data
      });
    },
    findAreaListNoParentByParentCode() {
      groupArea({
        params: {
          areaCode: this.query.areaCode,
        },
      }).then((res) => {
        this.optionsArea = [res.data];
      });
    },
    getList(e) {
      abnormalStateUnit(this.query).then((res) => {
        this.tableData = res.data.list;
        this.total = res.totalCount;
      });
    },
    onCascaderChange(e) {
      // ,['食品生产经营者',"餐饮服务经营者","单位食堂","食品销售经营者"])
      if (!e.length) {
        this.query.bodyIndustry = [];
        this.query.bodyIndustryRemarks = [];
      } else {
       this.query.bodyIndustryRemarks = this.$_.difference(
          this.$_.flattenDeep(e),
         this.bodyindustryList.map(x=>x.bodyIndustryRemarks)
        );
        this.query.bodyIndustry = this.$_.intersection(this.$_.flattenDeep(e), this.bodyindustryList.map(x=>x.bodyIndustryRemarks));
        if (
          this.$_.intersection(this.query.bodyIndustryRemarks,this.bodyindustryList.filter(x=>x.bodyIndustryRemarks=='餐饮服务经营者')[0].list.map(x=>x.bodyIndustryRemarks)).length
        ) {
          this.query.bodyIndustry = this.$_.pull(
            this.query.bodyIndustry,
            "餐饮服务经营者"
          );
        }
        if (
          this.$_.intersection(this.query.bodyIndustryRemarks,this.bodyindustryList.filter(x=>x.bodyIndustryRemarks=='集中用餐单位食堂')[0].list.map(x=>x.bodyIndustryRemarks)).length
        ) {
          this.query.bodyIndustry = this.$_.pull(
            this.query.bodyIndustry,
            "集中用餐单位食堂"
          );
        }

        if (
          this.$_.intersection(this.query.bodyIndustryRemarks,this.bodyindustryList.filter(x=>x.bodyIndustryRemarks=='食品销售经营者')[0].list.map(x=>x.bodyIndustryRemarks)).length
        ) {
          this.query.bodyIndustry = this.$_.pull(
            this.query.bodyIndustry,
            "食品销售经营者"
          );
        }
      }
    },
    CascaderArea(e) {
      this.query.areaCode = e[e.length - 1];
    },
    score(e) {
      sessionStorage.setItem("newLicenseNo", e.newlicenseno);
      sessionStorage.setItem("interpretation", e.id);
      this.$router.push({
        path: "/interpretation/home?url=/foodSafety/archives/archives",
      });
    },
    getExport(e) {
      exportAbnormalStateUnit({
        ...this.query,
        bodyIndustryRemarks: this.query.bodyIndustryRemarks.join(","),
        bodyIndustry: this.query.bodyIndustry.join(","),
      }).then((res) => {
        var blob = new Blob([res], {
          type: "application/vnd.ms-excel;charset=utf-8",
        });
        var downloadElement = document.createElement("a");
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download =
          "导出单位列表" + new Date().getTime() + ".xlsx"; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      });
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {},
  // 计算属性
  computed: {},
};
</script>
<style lang="less" scoped>
</style>
